import React, { Component, lazy, Suspense } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';

import Tabbar from '../components/Tabbar';

var Home = lazy(() => import('./index/Home'))
var Cate = lazy(() => import('./index/Cate'))
var Allgood = lazy(() => import('./index/Allgood'))
var Car = lazy(() => import('./index/Car'))
var Mine = lazy(() => import('./index/Mine'))
var NotFount = lazy(() => import('./NotFound'))
class Index extends Component {
  render() {
    return (
      <div>
        <Suspense fallback={<div>loading...</div>}>
          <Switch>
            <Route exact path='/index/home' component={Home}></Route>
            <Route exact path='/index/cate' component={Cate}></Route>
            <Route exact path='/index/allgood' component={Allgood}></Route>
            <Route exact path='/index/car' component={Car}></Route>
            <Route exact path='/index/mine' component={Mine}></Route>
            <Redirect exact from='/index' to='/index/home'></Redirect>
            <Route path='*' component={NotFount}></Route>
          </Switch>
        </Suspense>
        <Tabbar></Tabbar>
      </div>
    );
  }
}

export default Index;